<template>
    <!-- el-select 下拉选择器  clearable 可清空 -->
  <el-select
    :value="value"
    @change="changeChannel"
    clearable
    placeholder="请选择"
    >
    <el-option
    v-for="item in channelOptions"
    :key="item.id"
    :label="item.name"
    :value="item.id"
    />
  </el-select>
</template>

<script>
export default {
  name: 'GeekChannel',
  props: {
    // v-model 传递的属性固定为 value
    value: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      // channel_id: 0,
      // 频道选项数组(用于渲染)
      channelOptions: []
    }
  },
  created () {
    // 调用-获取频道列表
    this.getCannelList()
  },
  methods: {
    // 封装-获取频道列表
    async getCannelList () {
      const res = await this.$http.get('/v1_0/channels')
      // console.log(res)
      this.channelOptions = res.data.data.channels
    },
    changeChannel (newValue) {
      // console.log(newValue)
      // v-model 绑定的消息(事件)固定为 input
      this.$emit('input', newValue)
    }
  }
}
</script>

<style>
/*样式*/
</style>
